<template>
  <div class="user">
    <van-nav-bar title="会员主页" left-arrow @click-left="backUp"></van-nav-bar>
    <!-- <div class="user-top">
                <nav class="user-nav" @click="goto('setting')">
                </nav>
                <div class="user-avatar">
                    <img v-lazy="'http://192.168.0.13:8080'+user.avatar" alt/>
                    <p>{{user.nickName}}</p>
                </div>
                <div class="user-balance">
                    <p>账户余额：{{user.balance }}</p>
                    <div>
                        <span @click="goto('withdrawrecord')">提现记录</span>
                        <button @click="goto('withdraw')">提现</button>
                    </div>
                </div>
    </div>-->
    <!-- <div class="user-card">
          <div class="avatar-container">
            <img v-lazy="'http://192.168.0.13:8080'+user.avatar" alt />
          </div>
          <div>

          </div>
    </div>-->
    <section class="user-card" :style="levelBack">
      <van-row class="user-info">
        <van-col span="4" offset="2">
          <div class="user-avatar">
            <!-- <div class="click-box" @click="choose"></div> -->
            <input
              id="file"
              class="upload"
              type="file"
              name="image"
              accept="image/*"
              @change="upload"
            />
            <img v-lazy="user.avatar" alt />
          </div>
        </van-col>
        <van-col class="user-info-detail" span="11" offset="1">
          <div>昵称：{{info.nickName}}</div>
          <div>手机：{{info.mobile}}</div>
          <div>邀请码：{{info.inviteCode}}</div>
        </van-col>
        <van-col class="user-identity" span="6">
          <van-icon name="user-o" />
          <span>{{info.levelName}}</span>
          <!-- <div>邀请码：{{info.inviteCode}}</div> -->
        </van-col>
      </van-row>
      <van-row class="user-line">
        <van-col offset="1" span="22">
          <div></div>
        </van-col>
      </van-row>
      <van-row class="user-income-title">
        <van-col offset="2" span="2">余额</van-col>
        <van-col offset="1" span="10">
          <button class="withdraw-btn" @click="goto('/withdraw')">提现</button>
        </van-col>
        <van-col span="9">股权数量</van-col>
      </van-row>
      <van-row style="font-size: 26px;">
        <van-col offset="2" span="13">{{info.balance}}</van-col>
        <van-col span="9">{{info.stockBalance}}</van-col>
      </van-row>
      <van-row style="color: #97876c">
        <van-col offset="2" span="14" style="font-size: 16px;">
          积分:
          {{info.integralBalance}}
        </van-col>
      </van-row>
    </section>

    <div class="user-content">
      <div class="user-order">
        <div class="order-header" @click="toVipOrder(0)">
          <h5>我的订单</h5>
          <span>查看全部订单&nbsp;></span>
        </div>
        <ul class="order-content">
          <li @click="toVipOrder(1)">
            <a>
              <van-icon name="pending-payment" />
              <p>待付款</p>
            </a>
          </li>
          <li @click="toVipOrder(2)">
            <a>
              <van-icon name="logistics" />
              <p>待发货</p>
            </a>
          </li>
          <li @click="toVipOrder(3)">
            <a>
              <van-icon name="gift-o" />
              <p>待收货</p>
            </a>
          </li>
        </ul>
      </div>
      <div class="user-address">
        <van-cell title="我的会员" icon="friends-o" is-link to="team" />
        <van-cell title="修改密码" icon="edit" is-link to="/pwdchange" />
        <van-cell title="修改昵称" icon="edit" is-link to="/nicknamechange" />
        <van-cell title="我的邀请码" icon="coupon-o" :value="user.inviteCode" is-link to="/invite" />
        <van-cell title="我的收款码" icon="qr" is-link to="/paymentcode" />
        <!-- <van-cell title="会员等级" icon="user-o" :value="user.levelName"/> -->
        <van-cell title="我的银行卡" icon="credit-pay" is-link to="/bankcardlist" />
        <van-cell title="提现记录" icon="credit-pay" is-link to="/withdrawrecord" />
        <van-cell title="收益记录" icon="credit-pay" is-link to="/earningrecord" />
        <van-cell title="退出登录" icon="close" @click="logout" />
      </div>
    </div>
  </div>
</template>
<script>
import { Cell, CellGroup, Row, Col } from "vant";
import Croppa from "vue-croppa";
import url_java from "@/utils/api_data";
import axios from "axios";

export default {
  name: "user",
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Row.name]: Row,
    [Col.name]: Col,
    Croppa: Croppa.component
  },
  data() {
    return {
      levelBack: {
        background: "linear-gradient(#6b6a69, #232322)",
        boxShadow: "0 5px 10px #232322;"
      },
      Img: "",
      info: {},
      user: {}
    };
  },
  mounted() {
    this.getMe();
  },
  methods: {
    getMe() {
      this.$axios({
        method: "get",
        url: url_java.memberInfo,
        params: {
          token: localStorage.getItem("token")
        }
      }).then(res => {
        console.log(res);
        this.user = res;
        this.info = res;
      });
    },
    upload() {
      let file = document.getElementById("file").files[0];
      console.log(file);
      let formData = new FormData();
      formData.append("imageFile", file);
      const instance = axios.create({
        withCredentials: true
      });
      instance
        .post("http://mcity.asrobot.cn/api/image/upload.json", formData)
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.changeAvatar(res.data.data);
          }
        });
    },
    changeAvatar(imageUrl) {
      this.$axios({
        method: "post",
        url: url_java.updateAvatar,
        params: {
          token: localStorage.getItem("token"),
          imageUrl: imageUrl
        }
      }).then(res => {
        this.getMe();
      });
    },
    goto(name) {
      this.$router.push({ path: name });
    },
    toVipOrder(state) {
      sessionStorage.setItem("vipstate", String(state));
      this.$router.push({ name: "viporder", params: { state: String(state) } });
    },
    logout() {
      localStorage.removeItem("token");
      this.$router.replace({ path: "/login" });
    },
    backUp() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
@import "~style/user.less";

// .user-avatar {
//   padding-left: 20px;
//   display: flex;
//   align-items: center;
//   img {
//     margin-right: 20px;
//   }
// }
// .user-card {
//   position: relative;
//   margin: 20px;
//   background: linear-gradient(#6b6a69, #232322);
//   box-shadow: 0 5px 10px #232322;
//   border-radius: 5px;
//   .avatar-container {
//     position: absolute;
//     left: 50px;
//     top: 50px;
//   }
// }

.user-balance {
  padding: 0 20px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .font-dpr(12px);

  p {
    font-weight: 500;
    .font-dpr(18px);
  }

  span {
    margin-right: 10px;
  }

  button {
    display: inline-block;
    width: 50px;
    height: 30px;
    border: 1px solid @priColor;
    background-color: #fff;
    border-radius: 15px;
  }
}

.user-card {
  margin: 30px 10px 10px;
  padding: 10px 0;
  font-size: 14px;
  line-height: 2;
  color: #f3f3f3;
  border-radius: 10px;
  position: relative;
  z-index: 1;

  .user-info {
    padding-bottom: 8px;

    .user-avatar {
      position: relative;
      width: 56px;
      height: 56px;
      margin: 0 auto;
      font-size: 0;
      line-height: 0;
      transform: translate(-10px, -32px);
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.66);
      position: relative;
      overflow: hidden;
      .upload {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }

    .user-info-detail {
      padding-left: 1px;
    }

    .user-identity {
      display: flex;
      align-items: center;
      padding: 0 5px;
      opacity: 0.5;
      background-color: rgb(151, 135, 108);
      border-radius: 10px;
    }
  }

  .user-income-title {
    padding-top: 8px;
    // margin-left: calc(4.16666667% + 1rem);
    // margin-right: calc(4.16666667% + .5rem);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
}

.withdraw-btn {
  padding: 1px 10px;
  opacity: 0.5;
  color: #fff;
  background-color: rgb(151, 135, 108);
  border-radius: 20px;
}

.van-pull-refresh {
  min-height: 14.425rem;
}

.van-list__loading-text {
  font-size: 0.75rem;
}

.van-list__finished-text {
  font-size: 0.75rem;
}
</style>
